<template>
	<view class="container">
		<view class="top">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" v-for="(item,index) in list"
				:key="item.id">
				<view class="cartInfo" id="demo1">
					<!-- 购物车商品信息 -->
					<view class="cartInfochild">
						<!-- 选择框 -->
						<view class="cartInfo_switch common">
							<!-- 点击当前商品 -->
							<switch type="checkbox" :checked="item.checked" @click="singleCheck(index)" />
						</view>
						<!-- 图片 -->
						<view class="cartInfo_image common">
							<image :src="item.img|getImage" mode=""></image>
						</view>

						<!-- 信息 -->
						<view class="cartInfo_info">
							<label for="" style="font-size: 26rpx;">{{item.goodsname}}</label>

							<label for="" style="color: red;">￥{{item.price}}</label>
						</view>
						<!-- 加减数量 -->
						<view class="cartInfo_num">
							<view class="cartInfo_num_child">
								<label for="" @click="reduce(index)">-</label>
								<label for="">{{item.num}}</label>
								<label for="" @click="add(index,item.id)">+</label>
							</view>
						</view>
					</view>
				</view>
				<view class="cartDel" id="demo2"><label for="" @click="del(index)">删除</label></view>
			</scroll-view>
		</view>

		<!-- 底部 -->
		<view class="foot">
			<view class="footd1">
				<switch type="checkbox" @click="allCheck" :checked="isAll" />
				<label>全选</label>
			</view>
			<view class="footd2">
				<view class="footd2sp1">
					总计：
					<label style="color: red;">￥{{totalMoney}}</label>
				</view>
				<label class="footd2sp2">不含运费，已优惠￥0.00</label>
			</view>
			<!-- 跳到提交订单，结算页面 -->
			<view class="footd3">
				<!-- 被选中的商品的个数 -->
				<label @click="toConfirm">去结算({{totalCount}}件)</label>
			</view>

		</view>

	</view>
</template>

<script>
	// const app=getApp()
	export default {
		data() {
			return {
				list: [], //购物车商品列表
			}
		},
		computed: {
			//计算全选状态
			// isAll:function(){
			// 	let result =this.list.every(item=>{
			// 		return item.checked==true
			// 	})
			// 	return result;

			// }
			totalCount(){
				return this.list.reduce((total,item)=>{
					if(item.checked){
						return total+=item.num
					}else{
						return total;
					}
				},0)
			},
			totalMoney() {
				//计算总数
				let result = this.list.reduce((total, item) => {
					if(item.checked){
						return total += item.price * item.num
					}else{
						return total;
					}

				}, 0)
				return result;
			},
			isAll: {
				get: function() {
					if(this.list.length==0){
						return false;
					}
					
					let result = this.list.every(item => {
						return item.checked == true
					})
					return result;
				},
				set: function(newValue) {
					this.list.forEach(item => {
						item.checked = newValue
					})
				}
			}

		},
		methods: {
			//跳转订单确认页
			toConfirm(){
				let arr=this.list.filter(item=>{
					return item.checked==true
				})
				// console.log(arr);
				uni.setStorageSync("order",arr)
				uni.navigateTo({
					url:"/pages/confirm/confirm"
				})
			},
			//点击全选
			allCheck() {
				this.isAll = !this.isAll //false
			},
			//点击单选
			singleCheck(index) {
				this.list[index].checked = !this.list[index].checked
			},
			//点击删除
			async del(index) {

				//删除数据库中数据
				let id = this.list[index].id;
				let {
					token
				} = uni.getStorageSync("userInfo");
				let result = await this.$http({
					url: "api/cartdelete",
					data: {
						id
					},
					token
				}).catch(err => {
					console.error(err)
				})


				//删除页面中的数据
				this.list.splice(index, 1)

			},
			//点击减少
			reduce(index) {
				this.list[index].num--
				if (this.list[index].num <= 1) {
					this.list[index].num = 1;
				}
				//修改数据库
				this.editCart(index)


			},
			//点击增加
			add(index) {
				//页面num增加
				this.list[index].num++
				//修改数据库
				this.editCart(index)

			},
			//修改数据库中购物车数量
			async editCart(index) {
				//修改数据库
				let id = this.list[index].id; //购物车id
				let num = this.list[index].num; //修改后的数量
				let {
					token
				} = uni.getStorageSync("userInfo"); //获取token

				let result = await this.$http({
					url: "api/cartedit",
					data: {
						id,
						num
					},
					token
				}).catch(err => {
					console.error(err)
				})
				console.log(result);
			}
		},
		//读取购物车列表
		async onShow() {
			if(!uni.getStorageSync("isLogin")){
				uni.reLaunch({
					url:"/pages/send/send"
				})
			}
			//获取购物车商品列表
			let {
				uid,
				token
			} = uni.getStorageSync("userInfo")
			let result = await this.$http({
				url: "api/cartlist",
				data: {
					uid: uid
				},
				token
			}).catch(err => {
				console.error(err)
			})
			// console.log(result);
			let list = result.data.list
			// console.log(list);
			// return;
			if(list==null)return;
			list.forEach(item => {
				item.checked = false
			})

			this.list = list
		}
	};
</script>

<style>
	@import url('../../common/css/cart.css');

	.cartInfo_image_img {
		width: 120rpx;
		height: 120rpx;
	}
</style>
